<PageCard>

# React Examples

Learn how to build floating UI components.

<ShowFor packages={['react-dom']}>

<PackageLimited>@floating-ui/react only</PackageLimited>

</ShowFor>

</PageCard>

## Base UI

[Base UI](https://base-ui.com/react/overview/quick-start) is a
new component library built with `@floating-ui/react`, developed
by one of its authors. It offers a set of pre-built components,
including Tooltip, Popover, Dropdown Menu, Select, and Dialog.

- [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
- [Base UI Popover](https://base-ui.com/react/components/popover)
- [Base UI Menu](https://base-ui.com/react/components/menu)
- [Base UI Select](https://base-ui.com/react/components/select)
- [Base UI Dialog](https://base-ui.com/react/components/dialog)
- [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
- [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
- [Base UI Toast](https://base-ui.com/react/components/toast)

These are highly polished, production-ready components.

## Raw Floating UI

Base UI doesn't have all components you'll need yet, such as
Combobox. The following guides can help you learn how to build
using `@floating-ui/react` alone to create more advanced
components yourself:

- [Tooltip guide](/docs/tooltip)
- [Popover guide](/docs/popover)
- [Dialog guide](/docs/dialog)

## CodeSandbox Examples

More advanced examples are available via a CodeSandbox demo.
These are experimental examples that aren't fully polished and
may require further refinement for production use.

- [Dropdown Menu (including submenus)](https://codesandbox.io/s/admiring-lamport-5wt3yg?file=/src/DropdownMenu.tsx)
- [Context Menu](https://codesandbox.io/s/trusting-rui-2duieo?file=/src/ContextMenu.tsx)
- [Select](https://codesandbox.io/s/gallant-sea-rcg43b?file=/src/Select.tsx)
- [Select with Composable Children](https://codesandbox.io/s/floating-ui-react-select-with-composable-children-qsuw76?file=/src/App.tsx)
- [Virtualized Select](https://codesandbox.io/s/l10rjs?file=/src/App.tsx)
- [Autocomplete (combobox)](https://codesandbox.io/s/fragrant-water-bsuirj?file=/src/App.tsx)
- [Emoji picker](https://codesandbox.io/s/nameless-glade-kz3pfc?file=/src/App.tsx)
- [Text selection](https://codesandbox.io/s/floating-ui-react-range-selection-tkpj9v?file=/src/App.tsx)
